<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="demo-input-suffix gl_searchBox">
      <el-row :gutter="20">
        <!-- 章节名称查询框 -->
        <el-col :md="6" :lg="4">
          <p>章节名称</p>
          <el-input v-model="Api_GET_EventsManagementPoomsaeSettingQO.NameFilter" size="mini" placeholder="请输入" clearable @change="freshData()" />
        </el-col>
        <!-- 按钮 -->
        <el-col :md="6" :lg="4">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="freshData()">{{ $t('button.query') }}</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row :gutter="20" class="gl_my_15">
      <el-col :md="6" :lg="4">
        <el-button type="success" size="mini" @click="addChapter()">添加章节</el-button>
      </el-col>
    </el-row>
    <!-- 表格展示的内容 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      stripe
      size="mini"
    >
      <el-table-column
        prop="name"
        label="章节名称"
      />
      <el-table-column
        prop="creationTime"
        label="创建时间"
      >
        <template slot-scope="{row}">
          <span v-if="row.creationTime">
            {{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="creatorName"
        label="创建人"
      />
      <el-table-column
        prop="operating"
        label="操作"
        width="200"
      >
        <template slot-scope="{row,$index}">
          <el-button type="text" size="mini" @click="editChapter(row,$index)">{{ $t('table.edit') }}</el-button>
          <el-button type="text" size="mini" @click="delect(row,$index)">
            <span class="gl_color_error">{{ $t('table.delete') }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="gl_pt_20" style="text-align: center;">
      <el-pagination
        :current-page="Api_GET_EventsManagementPoomsaeSettingQO.Page"
        :page-size="Api_GET_EventsManagementPoomsaeSettingQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <!-- 子组件添加编辑 -->
    <test-form ref="testForm" @pushTabelData="getTabelDate" @editTabelData="updataTabelDate" />
  </div>
</template>

<script>
import testForm from './editChapter';
import { Api_GET_EventsManagementPoomsaeSettingQO } from '@/lib/form/game/swaggerForm';
import { api_POST_EventsManagementPoomsaeSetting, api_GET_EventsManagementPoomsaeSetting, api_DELETE_EventsManagementPoomsaeSettingId, api_PUT_EventsManagementPoomsaeSettingId } from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'Account',
  components: {
    testForm
  },
  data() {
    return {
      loading: false,
      Api_GET_EventsManagementPoomsaeSettingQO: new Api_GET_EventsManagementPoomsaeSettingQO(),
      totalPage: 0,
      tableData: [],
      showTableData: []
    };
  },
  created () {
    this.freshData();
  },
  methods: {
    // 获取表格内的数据
    freshData(page) {
      this.loading = true;
      this.Api_GET_EventsManagementPoomsaeSettingQO.Page = page || 1;
      this.Api_GET_EventsManagementPoomsaeSettingQO.SkipCount = (this.Api_GET_EventsManagementPoomsaeSettingQO.Page - 1) * this.Api_GET_EventsManagementPoomsaeSettingQO.MaxResultCount;
      api_GET_EventsManagementPoomsaeSetting(this.Api_GET_EventsManagementPoomsaeSettingQO).then(res => {
        this.loading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      })
        .catch(() => {
          this.loading = false;
        });
    },
    // 添加数据
    addChapter() {
      this.$refs.testForm.open();
    },
    // 修改数据
    editChapter(row, index) {
      this.$refs.testForm.open(row);
    },
    // 添加新信息
    getTabelDate(data) {
      const param = {
        name: data.name
      };
      api_POST_EventsManagementPoomsaeSetting(param).then(res => {
        this.freshData();
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }, error => {
        this.$message({
          message: error.error.message,
          type: 'error'
        });
      });
      this.$refs.testForm.close();
    },
    // 修改信息
    updataTabelDate(data, name) {
      console.log(data);
      const param = {
        name: name
      };
      api_PUT_EventsManagementPoomsaeSettingId(data.id, param).then(res => {
        this.freshData();
      });
      this.$refs.testForm.close();
    },
    // 删除
    delect(row, index) {
      console.log(row, index);
      this.$confirm('你确定要删除这条信息?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementPoomsaeSettingId(row.id).then(res => {
          this.freshData();
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        });
      });
    },
    // 重置
    reset() {
      this.Api_GET_EventsManagementPoomsaeSettingQO = new Api_GET_EventsManagementPoomsaeSettingQO();
      this.freshData();
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_EventsManagementPoomsaeSettingQO.MaxResultCount = MaxResultCount;
      this.freshData();
    },
    pageIndexChange(currentPage) {
      this.freshData(currentPage);
    }
  }
};
</script>
